<!--
 * @Descripttion: 
 * @version: 
 * @Author: liangxh
 * @Date: 2020-07-13 15:17:12
 * @LastEditors: liangxh
 * @LastEditTime: 2020-07-13 15:20:04
--> 
<div id="app">
    <!-- 对象语法 -->
    <!-- <h2 :style="{key(属性名):value(属性值)}">{{message}}</h2> -->
    <!-- 加单引号，当成字符串解析 -->
    <h2 :style="{fontSize:'50px'}">{{message}}</h2>
    <!-- 不加单引号，变量解析 -->
    <h2 :style="{fontSize:fontSize}">{{message}}</h2>
    <h2 :style="getStyle()">{{message}}</h2>
    <!-- 数组语法 -->
    <h2 :style="[baseStyle]">{{message}}</h2>
    <h2 :style="getStyle()">{{message}}</h2>
  </div>
  <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊",
        baseStyle:{backgroundColor:'red'},
        fontSize:25
      },
      methods: {
        getStyle(){
          return [this.baseStyle]
        }
      },
    })
  </script>